<template>
<div class="wrapper" :class="preview ? 'container1':''">

  <div class="question-info" :class="preview ? 'preview':''">
    <div class="header" >
      <div class="title">{{question.caption}}</div>
      <!-- <div class="timer">{{ createTime }}</div> -->
    </div>
    <div class="main">
      <div class="option-items" v-for="(items,index) in question.item" :key="index" tabindex="2">
        <div class="item-title">{{index + 1}}、{{items.title}}</div>
        <el-radio-group v-model="results[index].answer" v-if="items.qtype === '单选'" >
          <el-radio :label="items.choice[t]" v-for="(option,t) in items.choice" :key="t"></el-radio>
        </el-radio-group>
        <el-checkbox-group v-model="results[index].checkList" v-if="items.qtype === '多选'" >
          <el-checkbox :label="items.choice[t]" v-for="(option,t) in items.choice" :key="t"></el-checkbox>
        </el-checkbox-group>
        <el-input v-if="items.qtype === '填空'" type="textarea" :rows="2" placeholder="请输入内容" v-model="results[index].answer" >
</el-input>
      </div>
    </div>
    <el-row type="flex" justify="center" v-if="!preview">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="handSubmit">提交</el-button>
    </el-row>
  </div>
      
</div>
</template>
<script>
  import { getQuestion, postQuestion, getQuestionRcord } from '@/api/question.js'
  import { parseTime, uuid } from '@/utils/index.js'
  export default {
    name: 'question-info',
    props:{
      isSuperior:{
        type: Boolean,
        default:true
      },
      preview:{
        type: Boolean,
        default:true
      },
      isHand:{
        type: Boolean,
        default:false
      },
      taskId:{
        type: String
      },
      initQuestionInfo:{
        type: Object,
        default(){
          return {}
        }
      }
    },
    computed: {
        createTime(){
            const date = new Date(this.question.create)
            return parseTime(date,'{y}-{m}-{d}')
        }
    },
    data() {
      return {
        question: {},
        radio: '',
        textarea:'',
        checkList:[],
        results:[]
      }
    },
    created() {
      // const id = this.$route.params && this.$route.params.id
      // 不请求问卷填写记录
      // if(this.isHand){
      //   this.requestQuesRecord()
      // }
    },
    mounted() {
        this.requestQuesInfo()
    },
    methods: {
      // handBlur(e,itemId,quesId){
      //   if(typeof e === 'object'){
      //     e = e.join('`')
      //   }
      //   postQuestion({question:quesId, item:question,content:e}).then(res=>{})
      // },
      handSubmit(){
        let isFill = true
        this.results.forEach(e => {
          // 如果有多选，将checkList赋值给answer
          if(e.checkList.length) {
            e.answer = e.checkList
          }
          // 检查是否有空相
          if(!e.answer) {
            isFill = false
          }
        })
        if(isFill){
          // 处理循环请求结果，是否都完成
          let num = uuid()
          let queue = this.results.map(item => {
                  return new Promise((resolve,reject) => {
                    let param ={
                      uuid: num,
                      question:item.questionId, 
                      not_view: this.isSuperior ? 'True' : 'False',
                      item:item.itemId,
                      content: typeof item.answer === 'object' ? item.answer.join('`'): item.answer
                    }
                    postQuestion(param).then(res=>{
                      resolve(res.data)
                    }).catch(error => {
                      reject(error)
                    })
                });
          });
          Promise.all(queue).then(result => {
              //执行后续操作
              this.$message.success('问卷提交成功')
          }).catch(error => {
            this.$message.error('问卷提交失败')
          });
        }else{
          this.$message.warning('请填写完所有选项再提交！')
        }
      },
      requestQuesInfo() {
        // getQuestion({task: this.taskId}).then(res => {
            if(this.initQuestionInfo){
                this.question = this.initQuestionInfo
                const list =[]
                this.question.item.forEach(item=>{
                    list.push({
                        questionId:item.question,
                        itemId:item.id,
                        answer:null,
                        checkList:[]
                    })
                })
                this.results = list
            }
        // })
      },
      requestQuesRecord(){
        getQuestionRcord(this.question.id).then(res=>{
          const data =res.data
          this.results.forEach(item=>{
            data.forEach(e=>{
              if(item.itemId === e.item){
                if(e.content.split(' ').length>2){
                  item.checkList = e.content.split(' ')
                }else{
                  item.answer = e.content
                }
              }
            })
          })
        })
      }
    },
  }

</script>
<style lang="scss">
  .container1{
    background: #fff!important;
  }
    .wrapper{
        width: 100%;
        /* height:100vh; */
        /* background: #ebedf0; */
  .preview{
    padding:20px 0!important;
    width: 100%!important;
  }
  .question-info {
    max-width: 920px;
    margin: 0 auto;
    /* padding: 20px 40px; */
    background: #fff;
    .header {
      padding: 10px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px dashed #ccc;
    background-color: #f3f3f3;
      .title {
        font-size: 20px;
      }

      .timer {
        margin-top: 23px;
      }
    }

    .main {
      padding-left: 20px;

      .option-items {
        margin-bottom: 20px;

        .item-title {
          font-size: 16px;
          font-weight: bold;
          line-height: 1.8;
        }
      }

      .el-radio-group, .el-checkbox-group{
        display: flex;
        flex-direction: column;
        padding-left: 30px;
      }

      .el-radio, .el-checkbox{
        margin-top: 10px;
        font-size: 16px;
      }
      .el-textarea{
          margin: 10px 20px 0 30px;
          padding-right: 30px;
      }
    }
  }
    }
</style>
